<template>

     <!--添加新老师按钮，触发编辑同一个弹窗-->
     <div class="mb-4">
    <el-button type="primary"@click='centerDialogVisible=true,displayCourseInformation(2),changeNumFun(2)' >添加课程</el-button>
    </div>
    <!--与修改老师用的同一个组件，但点击保存时候，editTeacher按键会根据changeNum的值来判断是添加还是修改-->

    <div>
        <el-table :data="displayedTableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column fixed prop="name" label="课程名称" width="350" />
            <el-table-column prop="duration" label="时长" width="320" />
        
            <el-table-column prop="contains" label="上课容纳人数" width="420" />
            <el-table-column fixed="right" label="操作" min-width="120">

                <template #default="{$index}">
                    <el-button link type="primary" size="small" @click="centerDialogVisible=true,giveID($index)">
                        编辑
                    </el-button>
                    <el-button link type="primary" size="small" @click="deleteRow($index)">
                        删除
                    </el-button>
            
                </template>

            </el-table-column>
        </el-table>
    </div>

    <div class="tiaochuang">
    <!--  -------跳窗窗口组件---------  -->

    <el-dialog v-model="centerDialogVisible" :title="title" width="900" center>
        
        <!--表单组件-->
        <el-form :model="courseTableEdit" label-width="auto" style="max-width: 600px;
        display: flex;
        flex-direction: column;
        margin-left: 140px;
        text-align: left;
        ">

            <el-form-item label="课程名称:" style="margin-bottom: 15px">
            <el-input v-model="courseTableEdit.courseName" placeholder="请输入课程姓名"  />
            </el-form-item>
            
            <!--数字更改组件-->
            <el-space style="margin-bottom: 15px">
                时长（分钟）：
                <el-input-number v-model="courseTableEdit.courseDuration"/>
            </el-space>

            <el-space style="margin-bottom: 15px">
                课程容纳人数：
                <el-input-number v-model="courseTableEdit.courseDuration2"/>
            </el-space>

            <el-space style="margin-bottom: 15px">
                消耗次数/节：
                <el-input-number v-model="courseTableEdit.courseDuration3" />
            </el-space>
            <!--数字更改组件##-->

            <!--颜色选择器-->
            <div class="demo-color-block" style="margin-bottom: 15px">
                <span class="demonstration">选取课程颜色</span>
                <el-color-picker v-model="color1" />
            </div>
            <!--颜色选择器##-->

            <!--勾选表格组件-->
            <div style="display: flex; align-items: center;">
                <span style="margin-right: 10px;margin-bottom: 15px;width: 12%;">勾选类型:</span>
            <el-table :data="courseTableEdit.courseMemberCard" style="width: 100%;margin-bottom: 15px;">
                <el-table-column type="selection" width="55" />
                <el-table-column property="memberCard" label="会员卡" width="220">
                    <template #default="scope">{{ scope.row.memberCard }}</template>
                </el-table-column>
                
                <el-table-column property="memberType" label="会员类型" width="220"/>
            </el-table>
            </div>
            <!--勾选表格组件##-->

            <!--限制性别组件-->
            
            <el-select v-model="Sexvalue" placeholder="性别限制" style="width: 240px;margin-bottom: 15px">
                
                <el-option
                    v-for="item in options" 
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <!--限制性别组件##-->
            
            <!--限制年龄组件-->
            <div style="display: flex; align-items: center;">
                <span style="margin-right: 10px;margin-bottom: 15px">年龄限制:</span>
                <el-radio-group v-model="radio1" style="margin-bottom: 15px">
                    
                    <el-radio value="1" size="large">不限制</el-radio>
                    <el-radio value="2" size="large">
                    大于
                    <!--年龄输入框-->
                    <el-input v-model="input" style="width:60px" placeholder="10" />
                    <!--年龄输入框##-->
                    岁
                    </el-radio>
                </el-radio-group>
            </div>
            <!--限制年龄组件##-->

            <!--限制预约次数-->
            <div style="display: flex; align-items: center;">
                <span style="margin-right: 10px;margin-bottom: 15px">预约次数限制:</span>
                <el-radio-group v-model="radio2" style="margin-bottom: 15px">
                    <el-radio value="1" size="large">不限制</el-radio>
                    <el-radio value="2" size="large">
                        每名会员最多可以预约本课程
                        <!--年龄输入框-->
                        <el-input v-model="input2" style="width: 40px" placeholder="2" />
                        <!--年龄输入框##-->
                        次
                    </el-radio>
                </el-radio-group>
            </div>
            <!--限制预约次数##-->

    </el-form>
        <!--表单组件-->

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false,editCourse(changeNum)">
                保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!--####跳窗窗口组件#####-->
    </div>


    <!--显示当前一共多少条数据-->
    <div>当前{{startlocation}}条到{{endlocation}}条，共{{total}}条</div>
    <!--显示当前一共多少条数据#-->

    <!--分页组件 el-pagination在点击换页后触发@current-change事件，传递参数val为当前页码-->
    <div class="example-pagination-block">
    <div class="example-demonstration"/>
    <el-pagination layout="prev, pager, next" :total="total" 
    :pageSize="pageSize"
    @current-change="handleCurrentChange"/>
    </div>
    <!--分页组件#-->

</template>

<script setup>
    import axios from 'axios'
    import { ref,reactive, onMounted,onBeforeUnmount,shallowRef} from 'vue'
    import { ElTable } from 'element-plus'
    import { getlength,getOnePageDate} from '@/api/course.js'



//跳窗组件属性

    //限制预约次数
        const radio2 = ref('1')
        //年龄大小
        const input2 = ref('')
        //年龄大小##
    //限制预约次数##

    //限制年龄
        const radio1 = ref('1')
        //年龄大小
        const input = ref('')
        //年龄大小##
    //限制年龄##

    //性别限制器
    const Sexvalue = ref()
    const options = [
    {
        value: 0,
        label: '不限制',
    },
    {
        value: 1,
        label: '仅男',
    },
    {
        value: -1,
        label: '仅女',
    }
    ]
    //性别限制器##

    //课程介绍复文本输入框
    // import '@wangeditor/editor/dist/css/style.css' // 引入 css
    // import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


    //     // 编辑器实例，必须用 shallowRef
    // const editorRef = shallowRef()

    //     // 内容 HTML
    // const valueHtml = ref('')
    // const toolbarConfig = {}
    // const editorConfig = { placeholder: '请输入内容...' }
    //     // 组件销毁时，也及时销毁编辑器
    // onBeforeUnmount(() => {
    //     const editor = editorRef.value
    //     if (editor == null) return
    //     editor.destroy()
    // })

    // const handleCreated = (editor) => {
    //   editorRef.value = editor // 记录 editor 实例，重要！
    // }
    // const mode='default' // 或 'simple
    //课程介绍复文本输入框##
    
    
    //表格属性
    
    //表格属性##

    //颜色选择器
    const color1 = ref('#409EFF')
    //颜色选择器##

    //数字选择器
    const num = ref(0)
    //数字选择器##

    //定义响应式变量来存储课程信息,用于编辑课程时发送给后端数据
    const courseTableEdit=reactive({
            id:0,
            courseName:'',
            courseDuration:0,
            courseDuration2:0,
            courseDuration3:0,
            courseMemberNum:0,
            courseConsumption:0,
            courseColor:color1,
            courseMemberCard:
            
            [
          { memberCard: '黄金卡', date: '2023-01-01', memberType: '黄金会员' },
          { memberCard: '白银卡', date: '2023-02-01', memberType: '白金会员' },
          { memberCard: '钻石卡', date: '2023-03-01', memberType: '钻石会员' }
        ],
            // courseDescribtion:valueHtml,
            courseDescription:'',
            courseSexLimit:Sexvalue.value,
            courseAgeLimit:input.value,
            courseCountLimit:input2.value
        })


//跳窗组件属性##

    //设立changeNum来判断是添加还是修改
    const changeNum=ref(0)
    const changeNumFun=(num)=>{
      changeNum.value=num
    }

    //设置centerDialogVisible
    const centerDialogVisible = ref(false)

    
    //设置页码,后台数据总条数,后台10条数据存储数组,每页数据条数
    const title = ref('编辑课程')
    const currentPage=ref(1)
    const total=ref(0)
    const displayedTableData = ref([]) // 存储当前页面显示的数据
    const pageSize = 10 // 每页显示的条目数量

    //本页数据起始端和结束端
    let startlocation=(currentPage.value-1)*10
    let endlocation=0

    

    const displayCourseInformation = (Numshow) => {
      if(Numshow==1){
        title.value='编辑课程'
      }else{
        title.value='添加课程'
      }
    }

    //赋值id属性
    const giveID = (index) => {
        form.id = displayedTableData.value[index].id
    }

    //页码变化刷新页面函数,处理当前页码变化
    const handleCurrentChange = (val) => {
        currentPage.value = val;
        displayCurrentPageData();
    }


    //增加和修改函数
    const editCourse=(identify)=>{
        //如果为1,修改课程信息内容
        if(identify==1){
            title.value="修改课程"
            //向后端发送axios请求，修改对应id的记录，并重新刷新页面

            //#################################
            // axios.post("/api/system-settings/course-management/course-list/update",courseTableEdit)
            //     .then(res => {
            //         console.log("===更新数据库一条数据===")
            //         displayedTableData.value = res.data.data
            //         displayCurrentPageData(); // 刷新数据
            //     })
            //#################################

        }else{
            title.value="添加课程"

            //#################################
            // axios.post("/api/system-settings/course-management/course-list/add",courseTableEdit)
            //     .then(res => {
            //         console.log("===添加数据库一条数据===")
            //         displayedTableData.value = res.data.data
            //         displayCurrentPageData(); // 刷新数据
            //     })   
            //#################################

        }
    }


    //删除数据
    const deleteRow = (index) => {
        let courseID=displayedTableData.value[index].id
        //向后端发送axios请求，删除对应id的记录，并重新刷新页面
        axios.post("/api/system-settings/course-management/course-list/delete",
        {
          id:courseID
        }
        ).then(res => {
          console.log("===删除数据库数据并刷新页面===")
          displayedTableData.value = res.data.data
          displayCurrentPageData(); // 显示一页的数据
        })
    }


    //刷新表格函数
    const displayCurrentPageData = () => {
        getOnePageDate(currentPage.value).then(res => {
          console.log(res.data.data)
          displayedTableData.value = res.data.data
          startlocation=(currentPage.value-1)*10
          endlocation=startlocation+displayedTableData.value.length
        })
    }
    

    //通过axios获取后台数据
    onMounted(() => {
        getlength().then(res => {
            console.log("从后台取来的数据长度,条数为:",res.data.data)
            total.value = res.data.data // 更新 total 的值
            displayCurrentPageData(); // 显示一页的数据
        })
    })

    //设置表格的颜色
    const tableRowClassName=(row)=> {
      // 根据条件返回不同的类名
      if (row.name === 'Tom') {
        return 'highlight-row'; // Tom 的行高亮显示
      } else if (row.name === 'Jerry') {
        return 'warning-row'; // Jerry 的行警告颜色
      } else {
        return ''; // 其他行没有额外样式
      }
    }

</script>

<style scoped>
    /*分页样式*/ 
    .example-pagination-block {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .example-pagination-block .example-demonstration {
        margin-bottom: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*分页样式##*/ 


    /*表格样式*/
    .highlight-row {background-color: #f2f2f2; /* 高亮行的背景色 */}
    .warning-row {background-color: #ffebcd; /* 警告行的背景色 */}
    /*表格样式##*/

    /*颜色选择器样式*/
    .demo-color-block {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }
    .demo-color-block .demonstration {
        margin-right: 16px;
    }
    /*颜色选择器样式##*/


    /*跳窗组件样式*/
    .tiaochuang {
        display: flex;
        justify-content: center;
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }

</style>